<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
</body>
<script>

    // 直接的数据
    // var type = "P40";
    // var color = "白色";
    // var size = 6.5;
    // var skill = function(){
    //     console.log("通话");
    // }

    // 将数据进行归纳总结打包形成的对象
    // var phone = {
    //     type:"P40",
    //     color:"白色",
    //     size:6.5,
    //     skill:function(){
    //         console.log("通话");
    //     }
    // }
        

    
    // 将类中的功能再次抽象，抽象成规范（工厂模式中的供应商提供的模块）
    // var o = {
    //     skill:function(){
    //         console.log(this.type + " 通话")
    //     }
    // }
    // // 类
    // function phone(t, c, s){
    //     // 工厂模式中的原料
    //     var obj = {};
    //     // 工厂模式中的原料加工
    //     // 将将来的实例的原型链指向规范
    //     // 让类和规范产生联系
    //     obj.__proto__ = o;
    //     obj.type = t;
    //     obj.color = c;
    //     obj.size = s;
    //     // 工厂模式中的出厂
    //     return obj;
    // }
    // // 根据类，创建出实例
    // var p1 = phone("P40", "白色", "6.5")
    // console.log(p1);
    // var p2 = phone("P50", "红色", "7.5")
    // console.log(p2);
    // p1.skill();
    // p2.skill();
    // console.log(p1.skill === p2.skill);     // false
    
    // 以上创建对象的方式叫工厂模式，以上工厂模式的语法已被js放弃。





    // js内置了一种工厂模式的语法，内置的工厂模式语法，根据执行方式，也称为构造自定义函数执行
    // 类
    function phone(t, c, s){
        // 如果将来new执行该函数，那么此时this就是原料
        // 加工
        this.type = t;
        this.color = c;
        this.size = s;
    }
    // 规范（上级供应商）
    phone.prototype.skill = function(){
        console.log(this.type + " 通话");
    }
    // 实例
    var p1 = new phone("P40", "白色", "6.5");
    var p2 = new phone("P60", "红色", "7.5");

    console.log(p1);
    console.log(p2);
    console.log(p1 === p2);

    p1.skill();
    p2.skill();
    console.log(p1.skill === p2.skill);

    // 关键字new，用来执行函数，new在执行函数时进行了如下操作（new的原理）
        // 1. 创建一个新对象
        // 2. 修改了函数的this，指向第一步创建的新对象
        // 3. 修改了新对象的原型链的指向，指向了函数的prototype
        // 4. 检测函数是否主动返回对象，如果没有，返回这个新对象



</script>
</html>